/**
 * @function
 * @name tabsCollapse
 * @description Tabs for tablet/desktop and collapse for mobile device.
 * @memberof HQ.components
 *
 * @param {object} enhancementRoot - The current DOM element.
 */
HQ.components.tabsCollapse = function (enhancementRoot) {

    $(this.elems).each(function () {

        // GLOBAL VARS
        // ==============================================================
        var $inst     = $(this);
        var firstLoad = true;

        // Tabs
        var tabSelected       = $inst.data('tab-selected');
        var tabFadeTransition = $inst.data('tab-fade');
        var tabUpdateHash     = $inst.data('tab-update-hash');
        var $tabs             = $('.my-tabs', $inst);
        var $tabsBtns         = $('.tabs-wrapper .toggle-btn', $tabs);
        var $tabsPanes        = $('.tab-content .tab-pane', $inst);

        // Collapse
        var collapseSelected   = $inst.data('collapse-selected');
        var collapseUpdateHash = $inst.data('collapse-update-hash');
        var $collapse          = $('.my-collapse', $inst);

        // HASH TAG: The hash tag has priority over the tabSelected.
        // To prevent browser anchor jump behavior we will add 'Panel' after de result.
        var hash = window.location.hash;

        // FUNCTION
        // ==============================================================

        /**
         * @function
         * @name _tabPaneAction
         * @description Show/Hide the current collapse section.
         * @memberof HQ.components.tabsCollapse
         *
         * @param {object} p_element The current tab button.
         * @param {string} p_action Action to show or hide the tab.
         * @private
         */
        function _tabPaneAction(p_element, p_action) {
            var id        = p_element.attr('href');
            var $tabPanes = $(id);

            if(p_action === 'hide'){
                $tabPanes.removeClass('fade').removeClass('in').removeClass('active');
            }else {
                $tabPanes.addClass('fade').addClass('in').addClass('active');
            }
        }

        /**
         * @function
         * @name _tabFadeTransition
         * @description To make tabs fade in.
         * @memberof HQ.components.tabsCollapse
         * @private
         */
        function _tabFadeTransition() {
            if (typeof(tabFadeTransition) !== "undefined" && tabFadeTransition) {
                $tabs.data('tab-fade', tabFadeTransition);
            }
        }

        /**
         * @function
         * @name _tabUpdateHash
         * @description Select the right tab trigger by the hash in the url.
         * @memberof HQ.components.tabsCollapse
         * @private
         */
        function _tabUpdateHash() {
            if (typeof(tabUpdateHash) !== "undefined" && tabUpdateHash && hash.length > 0) {
                $tabs.data('tab-update-hash', tabUpdateHash);
            }
        }

        /**
         * @function
         * @name _tabSelected
         * @description To select specific tabs.
         * @memberof HQ.components.tabsCollapse
         *
         * @param {boolean} p_externalApi Is a external API call.
         * @private
         */
        function _tabSelected(p_externalApi) {
            if (p_externalApi) {
                $tabs.trigger('tabSelected.TABS', [tabSelected]);

            } else {
                if (typeof(tabSelected) !== "undefined" && tabSelected) {
                    $tabs.data('tab-selected', tabSelected);
                }
            }
        }

        /**
         * @function
         * @name _collapseUpdateHash
         * @description Select the right collapse trigger by the hash in the url.
         * @memberof HQ.components.tabsCollapse
         *
         * @param {boolean} p_externalApi Is a external API call.
         * @private
         */
        function _collapseUpdateHash() {
            if (typeof(collapseUpdateHash) !== "undefined" && collapseUpdateHash && hash.length > 0) {
                $collapse.data('collapse-update-hash', collapseUpdateHash);
            }
        }
        
        /**
         * @function
         * @name _collapseSelected
         * @description To select specific collapse section.
         * @memberof HQ.components.tabsCollapse
         *
         * @param {boolean} p_externalApi Is a external API call.
         * @private
         */
        function _collapseSelected(p_externalApi) {
            if (p_externalApi) {
                $collapse.trigger('collapseSelected.COLLAPSE', [collapseSelected]);

            } else {
                if (typeof(collapseSelected) !== "undefined" && collapseSelected) {
                    $collapse.data('collapse-selected', collapseSelected);
                }
            }
        }

        /**
         * @function
         * @name _showCurrentTab
         * @description Select/Show the current tab.
         * @memberof HQ.components.tabsCollapse
         * @private
         */
        function _showCurrentTab() {
            var hasSelected = false;

            // Reactivated the fade transition.
            if (typeof(tabFadeTransition) !== "undefined" && tabFadeTransition) {
                $tabsPanes.addClass('fade');
            }

            $.each($tabsPanes, function () {
                var $this = $(this);

                if ($this.css('display') === 'block') {
                    var currentTabId = $this.attr('id');
                    var $currentTab  = $('[href="#' + currentTabId + '"]', $tabs);
                    
                    if($currentTab.parent().hasClass('active')){
                        _tabPaneAction($currentTab, 'show');
                    }else{
                        $currentTab.trigger('click');
                    }

                    // Scroll to above the nav tab.
                    $tabs.trigger('tabScrollTo.TABS', [$currentTab]);

                    hasSelected = true;
                }
            });

            if (!hasSelected) {
                _tabSelected(true);
            }
        }

        /**
         * @function
         * @name _showCurrentCollapse
         * @description Select/Show the current collapse section.
         * @memberof HQ.components.tabsCollapse
         *
         * @param {boolean} p_externalApi Is a external API call.
         * @private
         */
        function _showCurrentCollapse() {
            var hasSelected = false;

            // Set the collapse panel visibility and icon.
            $.each($tabsPanes, function () {
                var $this = $(this);

                if ($this.hasClass('active')) {
                    var $btn = $this.prev();

                    $('a', $btn).trigger("open");
                    hasSelected = true;
                    return false;
                }
            });

            // Remove all tabs class.
            if ($tabsBtns.length > 0) {
                $.each($tabsBtns, function () {
                    var $this = $(this);
                    _tabPaneAction($this, 'hide');
                });
            }

            if (!hasSelected) {
                _collapseSelected(true);
            }
        }

        /**
         * RWD (manipulation)
         * @private
         */
        function _desktopLayout() {
            $tabs.trigger('updateHash.TABS', [true]);
            $tabs.trigger('updateHash.COLLAPSE', [false]);

            // Remove collapse event and open all panes.
            _showCurrentTab();

            // Remove display on all panes.
            $tabsPanes.css('display', '');

            if (firstLoad) {
                firstLoad = false;

                // To make tabs fade in.
                _tabFadeTransition();

                // In page load, selected the pane to show.
                if (typeof(tabUpdateHash) !== "undefined" && tabUpdateHash && hash.length > 0) {
                    _tabUpdateHash();

                } else if (typeof(tabSelected) !== "undefined" && tabSelected) {
                    _tabSelected();
                }
            }
        }

        function _mobileLayout() {            
            $tabs.trigger('updateHash.TABS', [false]);
            $tabs.trigger('updateHash.COLLAPSE', [true]);
            
            _showCurrentCollapse();

            if (firstLoad) {
                firstLoad = false;

                // In page load, selected the pane to show.
                if (typeof(collapseUpdateHash) !== "undefined" && collapseUpdateHash && hash) {
                    _collapseUpdateHash();

                } else if (typeof(collapseSelected) !== "undefined" && collapseSelected) {
                    _collapseSelected();
                }
            }
        }

        // MEDIAS QUERIES
        // ==============================================================
        var _enquireMobileHandler = {
            match: function () {
                _mobileLayout();
            }
        };
        enquire.register(HQ.mediaqueries.MOBILE, _enquireMobileHandler);

        var _enquireNotMobileHandler = {
            match: function () {
                _desktopLayout();
            }
        };
        enquire.register(HQ.mediaqueries.NOT_MOBILE, _enquireNotMobileHandler, true);
        
    });
};